<template>
    <div>
        <p>自己的</p>
        <VoGrids ref="grids" :rows="3" :cols="3" v-model="list" draggable></VoGrids>
        <el-button-group>
            <el-button @click="handleGrids('reverse')">反转</el-button>
            <el-button @click="handleGrids('xReverse')">x轴反转</el-button>
            <el-button @click="handleGrids('yReverse')">y轴反转</el-button>
            <el-button @click="handleGrids('evenRowReverse')">偶数行反转</el-button>
            <el-button @click="handleGrids('oddRowReverse')">奇数行反转</el-button>
            <el-button @click="handleGrids('evenColReverse')">偶数列反转</el-button>
            <el-button @click="handleGrids('oddColReverse')">奇数列反转</el-button>
        </el-button-group>
        <el-button @click="changeData()">change</el-button>
        <p> <a href="https://jbaysolutions.github.io/vue-grid-layout/zh/" target="black">Vue Grid Layout</a> https://jbaysolutions.github.io/vue-grid-layout/zh/</p>
    </div>
</template>

<script>
import VoGrids from '@/components/Grids'

export default {
    components: {
        VoGrids
    },
    data() {
        return {
            list: [
                { x: 0, y: 0, name: 'no1', disabled: true },
                { x: 1, y: 0, name: 'no2', disabled: false },
                { x: 2, y: 0, name: 'no3', disabled: false },
                { x: 0, y: 1, name: 'no4', disabled: false },
                { x: 1, y: 1, name: 'no5', disabled: false },
                { x: 2, y: 1, name: 'no6', disabled: false },
                { x: 0, y: 2, name: 'no7', disabled: false },
                { x: 1, y: 2, name: 'no8', disabled: false },
                { x: 2, y: 2, name: 'no9', disabled: false },
            ]
        }
    },
    watch: {
        list: {
            deep: true,
            handler: function(value) {
                console.log('change', value);
            }
        }
    },
    mounted() {
    },
    methods: {
        handleGrids(key) {
            if (!key || typeof this.$refs.grids[key] !== 'function') return;
            this.$refs.grids[key]()
        },
        changeData() {
            this.list.forEach(e => {
                e.disabled = Math.random() > 0.5
            })
        }
    }
}
</script>

<style scoped>
.grid-item{
    background: #F2F6FC;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
